<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>perspective-origin</title>
<style type="text/css">
body { background: #abcdef; }
div { position: relative; width: 760px; height: 760px; margin: auto;
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	    -ms-transform-style: preserve-3d;
	     -o-transform-style: preserve-3d;
	        transform-style: preserve-3d;
	-webkit-perspective: 500px;
	   -moz-perspective: 500px;
	    -ms-perspective: 500px;
	     -o-perspective: 500px;
	        perspective: 500px;
	-webkit-perspective-origin: bottom;
	   -moz-perspective-origin: bottom;
	    -ms-perspective-origin: bottom;
	     -o-perspective-origin: bottom;
	        perspective-origin: bottom;
}
div > .inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateY(45deg); background: url(images/circle_inner.png) no-repeat center center; }
div > .middle { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateX(45deg); background: url(images/circle_middle.png) no-repeat center center; }
div > .outer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateZ(45deg); background: url(images/circle_outer.png) no-repeat center center; }
div > .imooc { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background: url(images/imooc.png) no-repeat center center; }
</style>
</head>
<body>
<div>
	<div class="inner"></div>
	<div class="middle"></div>
	<div class="outer"></div>
	<div class="imooc"></div>
</div>
</body>
</html>